import { skipToken } from '@reduxjs/toolkit/query/react';
import './App.css';
import { useState } from 'react';
import {
  useGetPostsListQuery,
  useGetPostsByIdQuery,
  useCreatePostsMutation,
  useDeletePostByIdMutation,
  useModifyPostByIdMutation,
  useLazyGetPostsListQuery,
} from './store/posts';
import { Test } from './Test';
// 直接访问钩子
// import postsApi from './store/posts';

function App() {
  const [number, setNumber] = useState<number>(1);
  // 使用skipToken是前面为假的时候不查询
  const { data, refetch } = useGetPostsListQuery();
  console.log(data);
  // 惰性拉取数据
  const [trigger, result, lastPromiseInfo] = useLazyGetPostsListQuery({
    // pollingInterval: 3000,
    // /**浏览器获取焦点的时候重新获取 */
    // refetchOnFocus: true,
    // /** 联网的时候获取*/
    // refetchOnReconnect: true,
  });
  // console.log(result, lastPromiseInfo, '122');
  const [createPostsHandler, createResult] = useCreatePostsMutation();
  const [deletePostsHandler] = useDeletePostByIdMutation();
  // 效果和上面的一样的
  // const useGetPostsListQuery1 = postsApi.endpoints.getPostsList.useQuery;
  // console.log(useGetPostsListQuery1(undefined));
  const postsListHandler = () => {
    trigger();
  };
  // 添加数据
  const postsCreateHandler = () => {
    createPostsHandler({ name: '哈哈', age: 20 });
    console.log(createResult, '创建的返回');
  };
  return (
    <div className='App'>
      <header className='App-header'>
        <div className='box' onClick={() => setNumber(number + 1)}></div>
        <button onClick={postsListHandler}>点击按钮查询全部数据</button>
        <button>点击按钮查询单个数据</button>
        <button onClick={postsCreateHandler}>点击按钮添加数据</button>
        <button onClick={() => deletePostsHandler(1)}>点击按钮删除数据</button>
        <button>点击按钮修改数据</button>
        <Test />
      </header>
    </div>
  );
}

export default App;
